<template>
  <headPage></headPage>
  <div class="main_box information">
    <div class="navigate_view">
      <span class="navigate_text">首页</span>
      <span class="navigate_line">/</span>
      <span class="navigate_last_text">意见反馈</span>
    </div>
    <div class="from_info">
      <titleText title="意见反馈"></titleText>
      <div class="title_text">反馈类型</div>
      <div class="select_info">
        <el-select
          v-model="selectValue"
          placeholder-style="color:#bfbfbf;font-size:7px;"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="title_text">问题描述</div>
      <div class="textarea_info">
        <el-input
          v-model="body"
          placeholder="请说明问题描述与建议，我们将为你不断改进～"
          placeholder-style="color:#bfbfbf;font-size:7px;"
          maxlength="200"
          type="textarea"
          resize="none"
        />
      </div>
      <div class="upload">
        <div class="upload_img" v-for="(item, index) in imgList" :key="index">
          <el-image :src="item" alt="" fit="cover" />
          <img
            @click="delImg(index)"
            class="del_img"
            src="../../../assets/my/32.png"
            alt=""
          />
        </div>
        <div class="upload_img">
          <!-- <upload ref="uploadText" class="upload_view" :limit="9" @getfile="filelistData">
          </upload> -->
          <input
            class="upload_input"
            type="file"
            accept="image/png, image/jpeg, image/jpg"
            @change="handleFiles"
            multiple
          />
          <img src="../../../assets/my/24.png" alt="" />
        </div>
      </div>
      <div class="upload_text">
        支持格式：.jpg .jpeg .png，单个文件不能超过5MB
      </div>
      <div class="save_btn" @click="submitFeed">
        <span>提交反馈</span>
      </div>
    </div>

    <div class="feed_list" v-loading="loading">
      <div class="list_text">反馈记录</div>
      <div class="feed_item" v-for="(item, index) in feedList" :key="index">
        <div class="item_img">
          <img :src="item.avatar" alt="" />
        </div>
        <div class="feed_content">
          <div class="item_content">
            {{ item.body }}
          </div>
          <div class="item_picture" v-if="item.thumb.length > 0">
            <el-image
              :preview-src-list="item.thumb"
              :initial-index="index"
              v-for="(url, index) in item.thumb"
              :key="index"
              :src="url"
              :lazy="true"
              fit="cover"
            />
          </div>
          <div class="item_text_1">反馈类型：{{ item.type }}</div>
          <div class="item_text_2">反馈时间：{{ item.create_time }}</div>
          <div class="item_text_3" v-if="item.is_replay == 2">
            平台回复：{{ item.replay }}
          </div>
        </div>
      </div>
    </div>
    <div class="no_data" v-if="feedList.length == 0 && !loading">
      <img class="no_img" src="../../../assets/default/12.png" alt="" />
    </div>
    <div class="margin_top">
      <paging
        :total="total"
        :pageSize="pageSize"
        @pageChange="pageChange"
      ></paging>
    </div>
  </div>
  <footerPage></footerPage>
</template>

<script name="feedBook" setup>
import {
  post6414719bdc956,
  post6414724b96f3f,
  post641472eb35317,
  post662092c66ee3c
} from "@/utils/api.js";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import titleText from "../titleText.vue";
import paging from "@/components/paging.vue";
import upload from "@/components/upload.vue";
import axios from "axios";
import { ref, reactive, onMounted, inject } from "vue";
const injectMessage = inject("$message");
onMounted(() => {
  getFeedType();
  getList();
});
let selectValue = ref("");
let options = ref([]);
// 获取反馈类型
function getFeedType() {
  post6414719bdc956({})
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        if (res.data.length > 0) {
          res.data.forEach((item) => {
            options.value.push({
              value: item.aid,
              label: item.title,
            });
          });
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 提交意见反馈
let body = ref("");
let is_submit = ref(false);
function submitFeed() {
  if (is_submit.value) return;
  if (!selectValue.value) {
    injectMessage.error("请选择反馈类型");
    return;
  }
  if (!body.value) {
    injectMessage.error("请输入问题描述与建议");
    return;
  }
  is_submit.value = true;
  post6414724b96f3f({
    type_id: selectValue.value,
    body: body.value,
    thumb: imgList.value.join(","),
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        injectMessage.success("提交成功");
        body.value = "";
        selectValue.value = "";
        imgList.value = [];
        is_submit.value = false;
      } else {
        is_submit.value = false;
      }
    })
    .catch((err) => {
      console.log(err);
      is_submit.value = false;
    });
}
// function filelistData(list) {
//   console.log(list);
//   imgList.value = list;
// }

// 上传文件
let imgList = ref([]);
function handleFiles(e) {
  if(e.target.files.length + imgList.value.length > 9) {
    injectMessage.error('最多只能上传9张图片');
    return;
  }
  // 获取配置信息
  post662092c66ee3c({}).then((res) => {
    if (res.data) {
      for (let i = 0; i < e.target.files.length; i++) {
        // 执行上传
        let file = e.target.files[i];
        let filename = file.name;
        let fileSize = file.size; // b
        let ossData = res.data;
        let formData = new FormData();
        let key = ossData.dir + filename;
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
        // 判断上传的视频是否超过500M
        if (fileSize > 5 * 1024 * 1024) {
          injectMessage.error("图片大小不得超过5M");
          return false;
        }
        // let random = Math.floor(Math.random() * 900) + 100;  // 生成随机数
        formData.append("OSSAccessKeyId", ossData.accessKeyId);
        formData.append("policy", ossData.policy);
        formData.append("signature", ossData.signature);
        formData.append("Filename", filename);
        formData.append("key", ossData.dir +  filename);
        formData.append("success_action_status", "200");
        formData.append("file", file);

        axios.post(ossData.host, formData, config).then((res) => {
          if (res.status == 200) {
            imgList.value.push(ossData.host + "/" + ossData.dir + filename);
            // console.log(imgList.value);
            // that.coverImg = ossData.host + '/' + ossData.dir + filename + '?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg';
            // that.videoUrl = ossData.host + '/' + ossData.dir + filename;
          }
        });
      }
    } else {
      injectMessage.error("获取上传配置信息失败");
    }
  });
}

function delImg(index) {
  imgList.value.splice(index, 1);
}

// 获取记录列表 post641472eb35317
let feedList = reactive([]);
let total = ref(0);
let loading = ref(true);
let pageNum = ref(1);
let pageSize = ref(10);
function getList() {
  post641472eb35317({
    page: pageNum.value,
    list_rows: pageSize.value,
  })
    .then((res) => {
      // console.log(res);
      loading.value = false;
      if (res.code == 1) {
        feedList = res.data.data;
        total.value = res.data.total;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

// 分页
function pageChange(page) {
  pageNum.value = page;
  loading.value = true;
  getList();
}
</script>

<style lang="scss" scoped>
.navigate_view {
  display: flex;
  align-items: center;
  padding: 13.5px 0 12px 0;
  .navigate_text {
    font-size: 9px;
    color: #666;
    cursor: pointer;
  }
  .navigate_line {
    font-size: 9px;
    color: #bfbfbf;
    margin: 0 5px;
  }
  .navigate_last_text {
    font-size: 9px;
    color: #1f52ae;
    cursor: pointer;
  }
}
.information {
  margin-top: 97px;
}
.from_info {
  background: #fff;
  padding: 20px 16px;
  .title_text {
    font-size: 9px;
    padding-top: 13px;
  }
  .select_info {
    height: 20px;
    // border: 1px solid #e5e5e5;
    background: #f6f7f9;
    border-radius: 2px;
    font-size: 7px;
    margin-top: 9px;
    width: 396px;
  }
  .textarea_info {
    font-size: 7px !important;
    border-radius: 2px;
    background: #f6f7f9;
    height: 78px;
    margin-top: 9px;
    width: 396px;
  }
  .upload {
    margin-top: 9px;
    overflow: hidden;
    .upload_img {
      float: left;
      width: 40px;
      height: 40px;
      margin-top: 12px;
      cursor: pointer;
      margin: 0 5px 5px 0;
      position: relative;
      .el-image {
        width: 100% !important;
        height: 100% !important;
        border-radius: 2px;
      }
    }
    .upload_input {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      cursor: pointer;
    }
    .upload_view {
      position: relative;
      z-index: 2;
      width: 100% !important;
      height: 100% !important;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .del_img {
      width: 8px;
      height: 8px;
      position: absolute;
      top: 3px;
      right: 3px;
    }
  }
  .upload_text {
    font-size: 6px;
    color: #999;
    margin-top: 6px;
  }
  .save_btn {
    width: 120px;
    height: 24px;
    background: #1f52ae;
    font-size: 8px;
    color: #fff;
    border-radius: 3px;
    margin: 32px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.feed_list {
  background: #fff;
  padding: 19px 16px 16px;
  margin-top: 12px;
  margin-bottom: 24px;
  .list_text {
    font-size: 9px;
    font-weight: 500;
  }
  .feed_item {
    margin-top: 16px;
    display: flex;
    .item_img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
    }
    .feed_content {
      flex: 1;
      .item_content {
        font-size: 9px;
        // margin-top: 10px;
      }
      .item_picture {
        margin-top: 8px;
        .el-image {
          width: 57px !important;
          height: 57px !important;
          margin-right: 5px !important;
          border-radius: 2px !important;
        }
      }
      .item_text_1 {
        font-size: 8px;
        color: #666;
        margin-top: 10px;
      }
      .item_text_2 {
        font-size: 8px;
        color: #666;
        margin-top: 10px;
      }
      .item_text_3 {
        padding: 8px;
        background: #f6f7f9;
        font-size: 8px;
        margin-top: 11px;
      }
    }
  }
}
.margin_top {
  margin-bottom: 24px;
}
</style>